<template>
  <HeadContainer class="mine-following" :title="$t('title.follow')" @back="$emit('back')">
    <div
      v-for="(follower, index) in followers"
      :key="follower.aff_follow"
      class="pointer"
      @click="toCreatorPage(follower.username, follower.aff_follow)"
    >
      <div class="d-flex gap-row-8 align-center" :class="{ 'mb-4': index === 0, 'my-4': index !== 0 }">
        <Avatar
          :src="follower.avatar"
          :radius="35"
          class="me-5 pointer"
          :vip="follower.is_vip"
          :vipTier="follower.tier"
        ></Avatar>
        <div class="font-size-14 font-weight-500">{{ follower.nickname }}</div>
      </div>
      <v-divider></v-divider>
    </div>
    <div v-if="!loading && followers.length === 0" class="d-flex justify-center align-center h-100">
      <ErrorNodata></ErrorNodata>
    </div>
    <div v-else>
      <v-container v-intersect="nextPage" class="text-center">
        <div v-if="loading" class="loading font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.loading') }}
        </div>
        <div v-if="noMore" class="no-more font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.noMore') }}
        </div>
      </v-container>
    </div>
  </HeadContainer>
</template>

<script setup>
import { onUnmounted } from 'vue'
import { TYPES, on } from '@/utils/state-broadcast'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import Avatar from '@/components/multimedia/Avatar.vue'
import { useInfinite } from '@/compositions/request/infinite'
import API from '@/http'

const emits = defineEmits(['toPage', 'back'])

const {
  dataList: followers,
  loading,
  noMore,
  errorMsg,
  init,
  refresh,
  nextPage,
} = useInfinite({ request: API.Follow.list })

init()

function toCreatorPage(username, id) {
  emits('toPage', 'another-creator', [id, username, 'following'])
}

// 其他頁面點擊追蹤/取消追蹤
const cancelFollowObserve = on(TYPES.FOLLOW, (id, isFollow) => {
  refresh()
})
onUnmounted(cancelFollowObserve)
</script>
